<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title data-lang="EarReturnAndChannelSettings">耳返与声道设置</title>
  <link rel="icon" href="../../../../favicon.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="../../../assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../../assets/css/style.css">
  <link rel="stylesheet" href="./index.css">
  <script src="../../../assets/js/ZegoExpressWebRTC.js"></script>
</head>

<body class="fix-sidebar card-no-border">
  <div class="preloader">
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
    </svg>
  </div>

  <div class="container main-wrapper">
    <!-- <div class="row"> -->
    <aside class="left-sidebar">
      <div class="scroll-sidebar">
        <nav class="sidebar-nav">
          <ul id="sidebarnav">
            <span class="sidebar-title" data-lang="Quickstart">快速开始</span>
            <li>
              <a href="../../QuickStart/CommonUsage/index.html" class="waves-effect" data-lang="CommonUsage">实现流程</a>
            </li>
            <li>
              <a href="../../QuickStart/Publishing/index.html" class="waves-effect" data-lang="Publishing">推流</a>
            </li>
            <li>
              <a href="../../QuickStart/Playing/index.html" class="waves-effect" data-lang="Playing">拉流</a>
            </li>
            <span class="sidebar-title" data-lang="Scenes">最佳实践</span>
            <li>
              <a href="../../Scenes/VideoForMultipleUsers/index.html" class="waves-effect"
                data-lang="VideoForMultipleUsers">多人视频通话</a>
            </li>
            <li>
              <a href="../../Framework/Vue/index.html" class="waves-effect" data-lang="Vue">使用 Vue 实现音视频功能</a>
            </li>
            <li>
              <a href="../../Framework/Angular/dist/index.html" class="waves-effect" data-lang="Angular">使用 Angular 实现音视频功能</a>
            </li>
            <li>
              <a href="../../Framework/React/index.html" class="waves-effect" data-lang="React">使用 React 实现音视频功能</a>
            </li>
            <span class="sidebar-title" data-lang="CommonFeatures">常用功能</span>
            <li>
              <a href="../../CommonFeatures/CommonVideoConfig/index.html" class="waves-effect"
                data-lang="CommonVideoConfig">常用视频配置</a>
            </li>
            <li>
              <a href="../../CommonFeatures/RoomMessage/index.html" class="waves-effect"
                data-lang="RoomMessage">实时消息</a>
            </li>
            <span class="sidebar-title" data-lang="AdvancedStreaming">推拉流进阶</span>
            <li>
              <a href="../../AdvancedStreaming/StreamMonitoring/index.html" class="waves-effect"
                data-lang="StreamMonitoring">推流、拉流信息监测</a>
            </li>
            <li>
              <a href="../../AdvancedStreaming/PublishingMultipleStreams/index.html" class="waves-effect"
                data-lang="PublishingMultipleStreams">同时推多路流</a>
            </li>
            <li>
              <a href="../../AdvancedStreaming/StreamByCDN/index.html" class="waves-effect"
                data-lang="StreamByCDN">通过CDN推流、拉流</a>
            </li>
            <li>
              <a href="../../AdvancedStreaming/LowLatencyLive/index.html" class="waves-effect"
                data-lang="LowLatencyLive">低延迟直播</a>
            </li>
            <span class="sidebar-title" data-lang="AdvancedVideoProcessing">视频进阶</span>
            <li>
              <a href="../../AdvancedVideoProcessing/EncodingAndDecoding/index.html" class="waves-effect"
                data-lang="SetVideoProperties">设置视频属性</a>
            </li>
            <li>
              <a href="../../AdvancedVideoProcessing/CustomVideoCapture/index.html" class="waves-effect"
                data-lang="CustomVideoCapture">自定义视频采集</a>
            </li>
            <span class="sidebar-title" data-lang="AdvancedAudioProcessing">音频进阶</span>
            <li>
              <a href="index.html" class="waves-effect" data-lang="EarReturnAndChannelSettings">耳返</a>
            </li>
            <li>
              <a href="../../AdvancedAudioProcessing/SoundLevelAndAudioSpectrum/index.html" class="waves-effect"
                data-lang="SoundLevelAndAudioSpectrum">音频频谱与声浪</a>
            </li>
            <li>
              <a href="../../AdvancedAudioProcessing/AEC_ANS_AGC/index.html" class="waves-effect"
                data-lang="AEC_ANS_AGC">音频3A处理</a>
            </li>
            <li>
              <a href="../../AdvancedAudioProcessing/AudioMixing/index.html" class="waves-effect"
                data-lang="AudioMixing">混音</a>
            </li>
            <li>
              <a href="../../AdvancedAudioProcessing/CustomAudioCaptureAndRendering/index.html" class="waves-effect"
                data-lang="CustomAudioCaptureAndRendering">自定义音频采集与渲染</a>
            </li>
            <span class="sidebar-title" data-lang="Others">其他功能</span>
            <li>
              <a href="../../Others/StreamMixing/index.html" class="waves-effect" data-lang="StreamMixing">混流</a>
            </li>
            <li>
              <a href="../../Others/ScreenSharing/index.html" class="waves-effect" data-lang="ScreenSharing">屏幕共享</a>
            </li>
            <li>
              <a href="../../Others/MediaTrackReplacement/index.html" class="waves-effect"
                data-lang="MediaTrackReplacement">音视频轨道替换</a>
            </li>
            <span class="sidebar-title" data-lang="DebugAndConfig">调试与配置</span>
            <li>
              <a href="../../DebugAndConfig/LogAndVersionAndDebug/index.html" class="waves-effect"
                data-lang="Log_Version_Debug">日志、版本号、调试信息</a>
            </li>
          </ul>
        </nav>
      </div>
    </aside>

    <div class="page-wrapper">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12 col-lg-6 preview-wrapper">
            <div class="preview-roomInfo">
              RoomID:&nbsp;<div id="roomInfo-id" class="m-r-10"></div>
              RoomState:&nbsp;<div id="roomInfo-state">
                <div class="success-svg" id="roomStateSuccessSvg" style="display: none;">
                  <svg class="ft-green-tick" xmlns="http://www.w3.org/2000/svg" height="10" width="10"
                    viewBox="0 0 48 48" aria-hidden="true">
                    <circle class="circle" fill="#5bb543" cx="24" cy="24" r="22" />
                  </svg>
                </div>
                <div class="error-svg" id="roomStateErrorSvg" style="display: inline-block;">
                  <svg class="ft-green-tick" xmlns="http://www.w3.org/2000/svg" height="10" width="10"
                    viewBox="0 0 48 48" aria-hidden="true">
                    <circle class="circle" fill="#5bb543" cx="24" cy="24" r="22" />
                  </svg>
                </div>
              </div>
            </div>
            <div class="row" id="videoList">
              <div class="preview-pushlishInfo col-lg-12 col-6">
                <div class="pushlishInfo-title" data-lang="Preview">
                  Preview
                </div>
                <div class="preview-content">
                  <div class="preview-action">
                    <div class="preview-info">
                      <div>Resolution: <span id="publishResolution"></span></div>
                      <div>Video Send Bitrate: <span id="sendBitrate"></span></div>
                      <div>Video Send FPS: <span id="sendFPS"></span></div>
                      <div>Packet Loss: <span id="sendPacket"></span></div>
                    </div>
                    <div class="preview-video-action">
                      <div class="m-t-10 m-b-5">
                        Publish StreamID <input class="m-l-10" type="text" id="PublishID" />
                      </div>
                      <button id="startPublishing" class="m-b-5 configBtn play-pause-button"  title="createStream() / startPublishingStream()">Start Publishing</button>
                    </div>
                  </div>
                  <video id="pubshlishVideo" autoplay muted playsinline></video>
                </div>
              </div>
              <div class="preview-playInfo col-lg-12 col-6 m-t-10">
                <div class="pushlishInfo-title" data-lang="PlayStream">
                  Play Stream
                </div>
                <div class="preview-content">
                  <div class="preview-action">
                    <div class="preview-info">
                      <div>Resolution: <span id="playResolution"></span></div>
                      <div>Video Send Bitrate: <span id="receiveBitrate"></span></div>
                      <div>Video Send FPS: <span id="receiveFPS"></span></div>
                      <div>Packet Loss: <span id="receivePacket"></span></div>
                    </div>
                    <div class="preview-video-action">
                      <div class="m-t-10 m-b-5">
                        Playing StreamID <input class="m-l-10" type="text" id="PlayID" />
                      </div>
                      <button id="startPlaying" class="m-b-5 configBtn play-pause-button"  title="startPlayingStream()">Start Playing</button>
                    </div>
                  </div>
                  <video id="playVideo" autoplay playsinline></video>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-lg-6 action-wrapper">
            <div class="action-step">
              <div class="action-content">
                <div class="font-14 font-bold m-t-15">
                  <span data-lang="HeadphoneMonitor">HeadphoneMonitor</span>
                  <div class="Monitor m-t-10">
                    <span class="font-12 font-medium m-r-10" data-lang="HeadphoneMonitor">HeadphoneMonitor</span>
                    <input type="checkbox" id="HeadphoneMonitor" /><label for="HeadphoneMonitor"></label>
                  </div>
                </div>
                <div class="font-14 flex-c">
                  <label for="formControlRange" class="m-0" data-lang="Volume">Volume: </label>
                  <span id="VolumeValue" class="m-l-5 m-r-15">50</span>
                  <input type="range" class="form-control-range" id="VolumeInput">
                </div>
                <div class="m-t-10 font-14 font-bold" data-lang="StereoChannel">Stereo Channel</div>
                <div class="flex-c m-t-10">
                  <div class="select-wrapper">
                    <span class="font-14" data-lang="SetChannel">Set Channel</span>
                    <select class="form-control form-control-sm m-l-15" id="Channel">
                      <option value="1" data-lang="Mono">Mono</option>
                      <option value="2" data-lang="DualChannel">Dual channel</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <ul class="goToDoc">
        <li>
          <span  data-lang="EarReturnTips"> 请插入耳机后再体验耳返功能 </span> <br/>
        </li>
        <li>
          <span data-lang="HelpDocsVideoCodec"> Web 端视频编码默认使用 VP8，体验和其他端互通，请在调试与配置页面修改为 H.264 </span>
          &nbsp;
          <a href="../../DebugAndConfig/LogAndVersionAndDebug/index.html" data-lang="HelpSettingsPage" target="_blank"> 点击修改 </a>
        </li>
        <li>
          <span  data-lang="MoreDocs">更多文档，请跳转至即构 </span> &nbsp;
          <a href="https://doc-zh.zego.im/article/4858" data-lang="HelpDocs" target="_blank"> 帮助文档 </a>
        </li> 
      </ul>
    </div>
    <!-- </div> -->
  </div>

  <script src="../../../assets/js/jquery.min.js"></script>
  <script src="../../../assets/js/jquery.i18n.properties.min.js"></script>
  <script src="../../../assets/js/metisMenu.min.js"></script>
  <script src="../../../assets/js/jquery.slimscroll.min.js"></script>
  <script src="../../../assets/js/bootstrap.min.js"></script>
  <script src="../../../assets/js/vconsole.min.js"></script>
  <script src="../../../assets/js/custom.js"></script>
  <script src="../../../KeyCenter.js"></script>
  <script src="index.js"></script>
</body>

</html>